<template>
    <div class="pe-collapse">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { provide, ref, watch } from "vue"

// 选中的name
const modelValue = defineModel<string | number | Array<string | number>>()

interface Props {
    accordion?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    accordion: false
})

const emits = defineEmits(["change"])

const accordionValue = ref<boolean>(false)

watch(props, newProps => {
    accordionValue.value = newProps.accordion
}, {immediate: true})

const onChange = (val: string | number | Array<string | number>) => {
    emits("change", val)
}

provide("pe-collapse-active", modelValue)
provide("pe-collapse-accordion", accordionValue)
provide("pe-collapse-change", onChange)
</script>

<script lang="ts">
export default {
    name: "pe-collapse"
}
</script>